import React, { Component } from 'react'
import { Table, Card, Button,Form,Select,Modal,message } from 'antd';
import axios from '../../axios/index';
import Utils from './../../utils/utils'
const { Option } = Select;
export default class city extends Component {
    state={
        columns:[
            {
                title:'城市ID',
                dataIndex:'id'
            }, {
                title: '城市名称',
                dataIndex: 'name'
            }, {
                title: '用车模式',
                dataIndex: 'mode',
                render(mode){
                    return mode ===1 ?'停车点':'禁停区';
                }
            }, {
                title: '营运模式',
                dataIndex: 'op_mode',
                render(op_mode) {
                    return op_mode === 1 ? '自营' : '加盟';
                }
            }, {
                title: '授权加盟商',
                dataIndex: 'franchisee_name'
            }, {
                title: '城市管理员',
                dataIndex: 'city_admins',
                render(arr){
                    return arr.map((item)=>{
                        return item.user_name;
                    }).join(',');
                }
            }, {
                title: '城市开通时间',
                dataIndex: 'open_time'
            }, {
                title: '操作时间',
                dataIndex: 'update_time',
                render: Utils.formateDate
            }, {
                title: '操作人',
                dataIndex: 'sys_user_name'
            }
        ],
        page:1,
        list:[],
        isShowOpenCity:false
    }

    componentDidMount(){
        this.requestList();
    }

    // 默认请求我们的接口数据
    requestList = ()=>{
        axios.ajax({
            url: '/open_city',
            data:{
                params:{
                    page:this.state.page
                }
            }
        }).then((res)=>{
            let list = res.data.result.item_list.map((item, index) => {
                item.key = index;
                return item;
            });
            this.setState({
                list:list
            })
        })
    }

    // 开通城市
    handleOpenCity = ()=>{
        this.setState({
            isShowOpenCity:true
        })
    }

    // 城市开通提交
    handleSubmit = ()=>{
        // let cityInfo = this.cityForm.form.getFieldsValue();
        axios.ajax({
            url:'/open_city',
            data:{
                // params:cityInfo
            }
        }).then((res)=>{
            if(res.data.code === '200'){
                message.success('开通成功');
                this.setState({
                    isShowOpenCity:false
                })
                this.requestList();
            }
        })
    }
    render() {
        return (
            <div className="card-content">
                <Card>
                    <FilterForm />
                </Card> 
                <Card style={{marginTop:10}}>
                    <Button type="primary" onClick={this.handleOpenCity}>开通城市</Button>
                </Card>
               <Table columns={this.state.columns} dataSource={this.state.list} bordered pagination={false}/>
               <Modal 
                    title="开通城市"
                    visible={this.state.isShowOpenCity}
                    onCancel={()=>{
                        this.setState({
                            isShowOpenCity:false
                        })
                    }}
                    onOk={this.handleSubmit}
                >
                    <OpenCityForm wrappedComponentRef={(form)=>{this.cityForm = form;}}/>
                </Modal>
            </div>
        )
    }
}

class FilterForm extends Component{

    render(){
        return (
            <Form layout="inline">
                <Form.Item label="城市" name="city_id'">
                            <Select
                                style={{width:100}}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                                <Option value="3">深圳市</Option>
                            </Select>
                </Form.Item>
                <Form.Item label="用车模式" name="mode">
                            <Select
                                style={{ width: 120 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">指定停车点模式</Option>
                                <Option value="2">禁停区模式</Option>
                            </Select>
                </Form.Item>
                <Form.Item label="营运模式" name="op_mode">
                            <Select
                                style={{ width: 80 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">自营</Option>
                                <Option value="2">加盟</Option>
                            </Select>
                        {/* )
                    } */}
                </Form.Item>
                <Form.Item label="加盟商授权状态" name="auth_status">
                            <Select
                                style={{ width: 100 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">已授权</Option>
                                <Option value="2">未授权</Option>
                            </Select>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" style={{margin:'0 20px'}}>查询</Button>
                    <Button>重置</Button>
                </Form.Item>
            </Form>
        );
    }
}

class OpenCityForm extends React.Component{

    render(){
        const formItemLayout = {
            labelCol:{
                span:5
            },
            wrapperCol:{
                span:19
            }
        }

        return (
            <Form layout="horizontal">
                <Form.Item label="选择城市" {...formItemLayout} name="city_id">
                    <Select style={{ width: 100 }}>
                        <Option value="">全部</Option>
                        <Option value="1">北京市</Option>
                        <Option value="2">天津市</Option>
                    </Select>
                </Form.Item>
                <Form.Item label="营运模式" {...formItemLayout} name="op_mode">
                    <Select style={{ width: 100 }}>
                        <Option value="1">自营</Option>
                        <Option value="2">加盟</Option>
                    </Select>
                </Form.Item>
                <Form.Item label="用车模式" {...formItemLayout}  name="use_mode">
                    <Select style={{ width: 100 }}>
                        <Option value="1">指定停车点</Option>
                        <Option value="2">禁停区</Option>
                    </Select>
                </Form.Item>
            </Form>
        );
    }
}